<template>
	<view>
		<scroll-view class="page" :scroll-x="false" :scroll-y="true" :scroll-with-animation="true">
		    <view class="box-user">
		        <view class="userinfo">
		            <view class="avatar">
		                <image src="/static/images/avatar.jpg" v-if="!userinfo.avatar"></image>
		                <image :src="userinfo.avatar" v-else></image>
		            </view>
		            <view class="info">
		                <view class="nickname">{{userinfo.nickname || '未设置昵称'}}</view>
		                <view class="vip">
		                    <image src="/static/images/user/ic_vip.png"></image>
		                    <text v-if="userinfo.vip_expire_time">{{userinfo.vip_expire_time}} 到期</text>
		                    <text v-else>未开通会员</text>
		                </view>
		            </view>
		        </view>
		        <view class="wallet">
					<view class="num">{{ userinfo.balance_point }}</view>
					<view class="label">{{ point_title }}余额</view>
				</view>
		    </view>
		    <view class="box-pay">
		        <view class="tabs">
		            <view class="tab-item" :class="{active: type === 'vip'}" @tap="changeType('vip')">
		                <image class="icon" src="/static/images/user/ic_vip.png"></image>
		                <text>开通会员</text>
		            </view>
		            <view class="tab-item" :class="{active: type === 'point'}" @tap="changeType('point')">
		                <text>充值{{ point_title }}</text>
		            </view>
		        </view>
		        <view class="box" v-if="goodsList && goodsList.length > 0">
		            <view class="box-title">
		                <view class="line"></view>
		                <text v-if="type === 'vip'">会员套餐</text>
		                <text v-else>充值套餐</text>
		            </view>
		            <view class="goods-list">
		                <view class="goods" :class="{active: index == activeIndex}" v-for="(item, index) in goodsList" @tap="chooseGoods(index)">
		                    <view class="hint" v-if="item.hint">{{item.hint}}</view>
		                    <view class="title">
		                        <text class="num">{{item.num}}</text>
								<text class="unit" v-if="type === 'vip'">个月</text>
								<text class="unit" v-if="type === 'point'">{{point_title}}</text>
		                    </view>
		                    <view class="price">特价<text>{{item.price / 100}}</text>元</view>
		                    <view class="market_price" v-if="item.market_price > 0">原价{{item.market_price / 100}}元</view>
		                </view>
		                <view style="clear: both;"></view>
		            </view>
		        </view>
		        <view class="box" v-if="goodsList && goodsList[activeIndex] && goodsList[activeIndex].desc && goodsList[activeIndex].desc.length > 0" style="padding-top: 0;">
		            <view class="box-title">
		                <view class="line"></view>
		                <text v-if="type === 'vip'">会员特权</text>
		                <text v-else>套餐介绍</text>
		            </view>
		            <view class="desc-list">
		                <view class="desc-item" v-for="item in goodsList[activeIndex].desc">
		                    <view class="icon"><image src="/static/images/ic_checked.png"></image></view>
		                    <view class="text">{{item}}</view>
		                </view>
		                <view style="clear: both;"></view>
		            </view>
		        </view>
		    </view>

		    <!-- </block> -->
		</scroll-view>

		<view class="paynow">
		    <button class="btn-pay" @tap="doPay" :disabled="activeIndex == -1 || paying">立即支付</button>
		    <view class="agreement">
		        <label>
		            <checkbox-group @change="agreeChange" style="display: flex; align-items: center;">
		                <checkbox class="check" value="1" :checked="is_agree" color="#04BABE" />已阅读并同意
		            </checkbox-group>
		        </label>
		        <view>
		            <text @tap="toDoc('service')">《服务协议》</text>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
			type: 'vip',
            goods_id: 0,
			goodsList: [],
			activeIndex: -1,
			userinfo: {
				user_id: 0,
				nickname: '',
				avatar: '',
				balance_point: 0,
				vip_expire_time: ''
			},
			point_title: '积分',
            paying: false,
			is_agree: false
        };
    },
    onLoad(options) {
		const isAgree = uni.getStorageSync('payAgree')
		this.setData({
			type: options.type ? options.type : 'vip',
			is_agree: !!isAgree
		})
		app.globalData.util.getSetting().then(res => {
			this.setData({
				point_title: res.priceSetting.title || '积分'
			})
		})
        this.getGoodsList();
    },
    onShow() {
		uni.setNavigationBarTitle({
			title: this.$lang('开通会员')
		})
        this.getUserInfo();
    },
    methods: {
		getGoodsList() {
            app.globalData.util
                .request({
                    url: '/order/getGoodsList',
					data: {
						type: this.type
					}
                })
                .then((res) => {
                    const goodsList = res.data;
                    goodsList.forEach((item, index) => {
                        if (item.is_default) {
                            this.setData({
                                activeIndex: index
                            });
                        }
                    });
                    this.setData({
                        goodsList: goodsList
                    });
                });
        },

		getUserInfo() {
			app.globalData.util
			    .request({
					url: '/user/info'
				}).then(res => {
					app.globalData.user_id = res.data.user_id;
					app.globalData.avatar = res.data.avatar;
					this.setData({
						userinfo: res.data
					})
				})
		},
		chooseGoods(index) {
			this.setData({
				activeIndex: index
			})
		},
		changeType(type) {
			this.setData({
				type: type
			})
			this.getGoodsList()
		},

        doPay() {
            if (this.paying) {
                return false;
            }
			const activeIndex = this.activeIndex
			if (activeIndex == -1) {
				app.globalData.util.message('请选择套餐');
				return false;
			}
			var goods_id = this.goodsList[activeIndex].id;

			if (!goods_id) {
				app.globalData.util.message('请选择套餐');
				return false;
			}

			if (!this.is_agree) {
				app.globalData.util.message('请阅读并同意《服务协议》');
				return false;
			}

            this.setData({
                paying: true
            });

            setTimeout(() => {
                this.setData({
                    paying: false
				});
			}, 2000);

			app.globalData.util
			    .request({
			        url: '/order/createOrder',
			        data: {
                platform: 'h5',
                trade_type: 'jsapi',
                type: this.type,
                goods_id: goods_id,
                page_url: window.location.href.replace('pages/pay/pay', '')
			        }
			    })
			    .then((res) => {
					var trade_type = res.data.trade_type;
					if (trade_type === 'jsapi') {
						const config = res.data;
						app.globalData.jssdk.chooseWXPay({
							timestamp: config.timestamp,
							nonceStr: config.nonceStr,
							package: config.package,
							signType: config.signType,
							paySign: config.paySign,
							success: function (res) {
								app.globalData.util.message('支付成功', 'error', function () {
									uni.redirectTo({
										url: '/pages/user/index'
									});
								});
							},
						    fail: function (res) {
						        app.globalData.util.message('发起支付失败：' + res.errMsg);
						    }
						});
					} else if (trade_type === 'native') {
						uni.navigateTo({
							url: '/pages/pay/qrcode?total_fee=' + res.data.total_fee + '&order_id=' + res.data.order_id + '&pay_url=' + encodeURIComponent(res.data.pay_url)
						})
					} else if (trade_type === 'h5') {
						window.location.href = res.data.pay_url
					}

			    });
        },
		agreeChange(e) {
			let value = e.detail.value
			let isAgree = value.length > 0
			if (isAgree) {
				uni.setStorageSync('payAgree', isAgree)
			} else {
				uni.removeStorageSync('payAgree')
			}
			this.setData({
				is_agree: isAgree
			})
		},
		toDoc(type) {
			uni.navigateTo({
				url: '/pages/article/article?type=' + type
			})
		},
		toKefu() {
			uni.redirectTo({
			  url: '/pages/article/article?type=kefu'
			})
		}
    }
};
</script>
<style>
.page {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 256rpx;
    overflow: hidden;
}

.box-user {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
    height: 200rpx;
    z-index: 1;
}

.box-user .userinfo {
    display: flex;
    align-items: center;
    padding: 40rpx 0 0 60rpx;
}

.box-user .userinfo .avatar {
    width: 108rpx;
    height: 108rpx;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f8f8f8;
}

.box-user .userinfo .avatar image {
    width: 100%;
    height: 100%;
}

.box-user .userinfo .info {
    display: flex;
    flex-direction: column;
    margin-left: 30rpx;
}

.box-user .userinfo .info .nickname {
    font-size: 34rpx;
    line-height: 48rpx;
    font-weight: bold;
    color: #1b1c1c;
    margin-top: 6rpx;
	max-width: 330rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.box-user .userinfo .info .vip {
    color: #1b1c1c;
    /* background-color: #8fded8; */
    /* padding: 0 16rpx; */
    height: 36rpx;
    border-radius: 18rpx;
    display: flex;
    align-items: center;
    margin-top: 10rpx;
}

.box-user .userinfo .info .vip image {
    width: 32rpx;
    height: 32rpx;
    margin-right: 10rpx;
    margin-top: 2rpx;
}

.box-user .userinfo .info .vip text {
    font-size: 24rpx;
}

.box-user .wallet {
    position: absolute;
    width: 200rpx;
    height: 100rpx;
    right: 30rpx;
    top: 44rpx;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.box-user .wallet .num {
    font-size: 32rpx;
    color: #04BABE;
    line-height: 44rpx;
}
.box-user .wallet .label {
    font-size: 24rpx;
    color: #666;
}

.box-pay {
    width: 100%;
    position: relative;
    width: 690rpx;
    margin: 0 auto;
    margin-bottom: 30rpx;
    border-bottom-left-radius: 30rpx;
    border-bottom-right-radius: 30rpx;
    overflow: hidden;
}
.box-pay .tabs {
    width: 100%;
    background: #eee;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.box-pay .tabs .tab-item {
    width: 50%;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1b1c1c;
}
.box-pay .tabs .tab-item .icon {
    width: 44rpx;
    height: 44rpx;
    margin-right: 10rpx;
    margin-top: 4rpx;
}
.box-pay .tabs .tab-item.active {
    background: #fff;
    font-weight: bold;
}

.box {
    width: 100%;
    background: #fff;
    overflow: hidden;
    padding: 30rpx 40rpx;
    box-sizing: border-box;
}
.box .box-title {
    width: 100%;
    height: 72rpx;
    line-height: 72rpx;
    font-size: 32rpx;
    color: #1b1c1c;
    /* font-weight: bold; */
    display: flex;
    align-items: center;
}
.box .box-title .line {
    background: #04babe;
    width: 10rpx;
    height: 30rpx;
    border-radius: 5rpx;
    margin-right: 16rpx;
}
.box .box-title .desc {
    font-weight: normal;
    color: #999;
    font-size: 24rpx;
    margin-left: 20rpx;
}
.goods-list {
    padding: 20rpx 0;
}
.goods-list .goods {
    background: #f3f9f9;
    width: 270rpx;
    height: 206rpx;
    border-radius: 30rpx;
    text-align: center;
    padding: 20rpx 0;
    float: left;
    margin-left: 26rpx;
    box-sizing: border-box;
    border: 4rpx solid #f3f6f9;
    margin-top: 26rpx;
    position: relative;
}
.goods-list .goods .hint {
    background: #fb5858;
    color: #fff;
    position: absolute;
    top: -24rpx;
    left: -4rpx;
    font-size: 22rpx;
    padding: 6rpx 20rpx;
    border-radius: 24rpx 12rpx 24rpx 0;
}
.goods-list .goods .title {
    font-size: 48rpx;
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-weight: bold;
    color: #1b1c1c;
}
.goods-list .goods .title .unit {
    font-size: 28rpx;
    margin-left: 20rpx;
    font-weight: normal;
}
.goods-list .goods .price {
    font-size: 28rpx;
    margin: 10rpx 0;
    color: #444;
    font-weight: bold;
}
.goods-list .goods .price text {
    color: red;
    margin: 0 6rpx;
}
.goods-list .goods .market_price {
    color: #999;
    text-decoration: line-through;
    font-size: 24rpx;
}
.goods-list .goods.active {
    border-color: #04babe;
}
.desc-list {
    padding: 20rpx 0 20rpx 24rpx;
}
.desc-list .desc-item {
    width: 100%;
    line-height: 48rpx;
    display: flex;
    align-items: center;
    margin: 20rpx 0;
    display: flex;
    align-items: flex-start;
}
.desc-list .desc-item .icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 16rpx;
    margin-top: 4rpx;
}
.desc-list .desc-item .icon image {
    width: 100%;
    height: 100%;
}
.desc-list .desc-item .text {
    width: 534rpx;
    font-size: 30rpx;
    color: #444;
}

.paynow {
    width: 100%;
    padding: 40rpx 0 20rpx 0;
    position: absolute;
    left: 0;
    bottom: 0;
}
.paynow .btn-pay {
    width: 610rpx;
    height: 88rpx;
    padding: 10rpx;
	background: #04babe;
	color: #fff;
	border: none;
    border-radius: 44rpx;
    font-size: 32rpx;
    outline: none;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 2rpx;
}
.paynow .btn-pay::after {
    display: none;
}
.paynow .btn-pay:active {
    transform: scale(0.95);
}
.paynow .agreement {
    width: 100%;
    font-size: 28rpx;
    color: #999;
    text-align: center;
    padding: 30rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.paynow .agreement text {
    color: #04babe;
}

.paynow .agreement .check {
	transform: scale(0.75);
}
</style>
